<!-- 团队主页---------------------------------团队医生 -->
<template>
	<view>
		<!-- 团队医生区域 -->
		<view class="section-card">
			<view class="section-title">团队医生</view>

			<view class="team-list" v-if="props.teamhomeData">
				<!-- 团队长 -->
				<view class="team-item" v-if="props.teamhomeData.leaderId">
					<view class="avatar-wrap">
						<image class="doctor-icon" :src="props.teamhomeData.leaderId.avatar"></image>
						<view class="leader-tag">团队长</view>
					</view>
					<!-- 机构ID  团队ID   _id是团队长医生ID-->
					<navigator
						:url="`/homepackge/pages/doctorshomepage/doctorshomepage?_id=${props.teamhomeData.leaderId._id}&orgId=${props.teamhomeData.organizationId._id}&teamId=${props.teamhomeData._id}`">
						<view class="doctor-info">
							<view class="doctor-name">
								{{ props.teamhomeData.leaderId.name }}
								<text class="doctor-type">{{props.teamhomeData.leaderId.roleId.name}}</text>
							</view>
							<view class="doctor-detail">
								<text class="doctor-title">签约人数：{{ props.teamhomeData.leaderId.signNumber }}</text>
							</view>
						</view>
					</navigator>
					<view class="card-right">
						<view class="sign-btn" @click="goToApplyContract(props.teamhomeData.leaderId._id)">签约</view>
					</view>
				</view>
				<!-- 团队成员 -->
				<view class="team-item" v-for="(member, index) in props.teamhomeData.memberIds" :key="index"
					v-if="props.teamhomeData.memberIds">
					<view class="avatar-wrap">
						<image class="doctor-icon" :src="member.avatar"></image>
					</view>
					<!-- 机构ID  团队ID   _id是团队员医生ID-->
					<navigator
						:url="`/homepackge/pages/doctorshomepage/doctorshomepage?_id=${member._id}&orgId=${props.teamhomeData.organizationId._id}&teamId=${props.teamhomeData._id}`">
						<view class="doctor-info">
							<view class="doctor-name">
								{{ member.name }}
								<text class="doctor-type">{{member.roleId.name}}</text>
							</view>
							<view class="doctor-detail">
								<text class="doctor-title">签约人数：{{ member.signNumber }}</text>
							</view>
						</view>
					</navigator>
					<view class="card-right">
						<view class="sign-btn" @click="goToApplyContract(member._id)">签约</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 接收父组件传递的团队数据
	const props = defineProps(['teamhomeData']);

	// 跳转到申请签约页面
	const goToApplyContract = (doctorId) => {
		const organizationId = props.teamhomeData.organizationId._id;
		const teamId = props.teamhomeData._id;

		uni.navigateTo({
			url: `/homepackge/pages/apply-contract/apply-contract?organizationId=${organizationId}&doctorId=${doctorId}&teamId=${teamId}`
		});
	}
</script>

<style scoped lang="scss">
	/* 医生团队样式 */
	.team-list {
		display: flex;
		flex-direction: column;
		// gap: 12rpx;
		padding: 0 30rpx;
	}

	.section-card {
		margin: 20rpx 0;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		padding: 0 30rpx 20rpx;
		border-bottom: 2rpx solid #f5f5f5;
		margin-bottom: 20rpx;
	}

	.team-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	/* 头像包裹层，用于定位标签 */
	.avatar-wrap {
		position: relative;
		margin-right: 24rpx;
	}

	.doctor-icon {
		width: 96rpx;
		height: 96rpx;
		border-radius: 16rpx;
		border: 2rpx solid #eee;
	}

	/* 团队长标签样式，定位在头像左下角 */
	.leader-tag {
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: #FDD878;
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		border-bottom-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}

	.doctor-info {
		flex: 1;
		min-width: 0;
	}

	.doctor-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 12rpx;
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.doctor-type {
		font-size: 24rpx;
		color: #666;
	}

	.doctor-detail {
		display: flex;
		gap: 30rpx;
	}

	.doctor-title {
		font-size: 28rpx;
		color: #999;
	}

	.card-right {
		margin-left: auto;
	}

	.sign-btn {
		padding: 8rpx 24rpx;
		background-color: #2984F8;
		color: white;
		border-radius: 8rpx;
		font-size: 24rpx;
		white-space: nowrap;
	}
</style>